<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">设置中心</text>
		</view>

		<!-- 设置中心容器 -->
		<view class="settings-container">
			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="avatar-section" @click="updateAvatar" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd;">
					<text class="label">头像</text>
					<view>
						<image :src="user_pic" mode="" v-if="user_pic" style="width: 100rpx; height: 100rpx; border-radius: 50%;"></image>
						<image :src="'/static/logo.png'" mode="" v-else style="width: 100rpx; height: 100rpx; border-radius: 50%;"></image>
					</view>
				</view>
				
				<view class="info-item" style="border-bottom: 1px solid #ddd;">
					<text class="label">用户名</text>
					<input type="text" v-model="nick_name" placeholder="请输入用户名" />
					<text class="iconfont icon-arrow-right"></text>
				</view>
				
				<view class="info-item" style="border-bottom: 1px solid #ddd;">
					<text class="label">手机号</text>
					<input type="number" v-model="phoneNum" placeholder="请输入手机号" maxlength="11"/>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			
			<!-- 功能设置区 -->
			<view class="function-section">
				<navigator url="/pages/address/address" class="function-item" style="border-bottom: 1px solid #ddd; display: flex; align-items: center;">
					<view style="display: flex; align-items: center;">
						<text class="iconfont icon-ditu" style="margin-right: 10rpx; font-size: 28rpx;"></text>
						<text class="label">我的地址</text>
					</view>
					<image class="menu-arrow" src="/static/images/箭头.png" style="width: 30rpx; height: 30rpx; position: absolute; right: 30rpx;"></image>
				</navigator>
				
				<navigator url="/pages/updatedPassword/updatedPassword" class="function-item" style="border-bottom: 1px solid #ddd; display: flex; align-items: center;">
					<view style="display: flex; align-items: center;">
						<text class="iconfont icon-mti-shoukao" style="margin-right: 10rpx; font-size: 28rpx;"></text>
						<text class="label">修改密码</text>
						<image class="menu-arrow" src="/static/images/箭头.png" style="width: 30rpx; height: 30rpx; position: absolute; right: 30rpx;"></image>
					</view>
				</navigator>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="btn-section" style="margin-top: 20rpx; display: flex; justify-content: center;">
			<button @click="changeInfo">保存修改</button>
		</view>
	</view>
</template>

<script>

import { updateUser } from '../../api/index.js';

	export default {
		data() {
			return {
				user_pic: '',
				nick_name: '',
				phoneNum: '',
				userId: '',
			}
		},
		created(){
			//进入页面先从本地获取用户信息 用户名 头像 手机号 用户id
			const user = uni.getStorageSync('userInfo');
			this.user_pic = user.user_pic;
			this.nick_name = user.nick_name;
			this.phoneNum = user.phoneNum;
			this.userId = user.id;
		},
		methods: {
		//保存修改
		changeInfo(){
			updateUser({
				id: this.userId,
				user_pic: this.user_pic,
				nick_name: this.nick_name,
				phoneNum: this.phoneNum,
			}).then(res => {
				if(res.data.status == 0){
					uni.showToast({
						title: '修改成功',
					});
					let info = uni.getStorageSync('userInfo');
					//修改成功后 更新本地用户信息
					let userInfo ={
						...info,
						user_pic: this.user_pic,
						nick_name: this.nick_name,
						phoneNum: this.phoneNum,
					}
					uni.setStorageSync('userInfo', userInfo);
					
					// 添加跳转到"我的"界面
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}, 1500)
				}else{
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					});
				}
			})
		},
		// 更新头像
		updateAvatar(){
		//选择图片
		uni.chooseImage({
			count: 1,
			type:"image",
			success: (res) => {
				console.log(res, '选择的图片');
				let imageUrl = res.tempFiles[0].path;
				console.log(imageUrl, '图片路径');
				//上传图片临时地址到服务器
				uni.uploadFile({
					url:"http://8.140.198.52:8001/common/uploadFile",
					filePath: imageUrl,
					name: 'file',
					header: {
						'content-Type': 'multipart/form-data',
						'Authorization': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res, '上传图片在服务器地址');
						this.user_pic = res.data;
					}
				});
			}
		});
		}
			
		}
	}
</script>

<style>
.page {
	background: linear-gradient(#b2cfed, #ffff);
	width: 100%;
	height: 100vh;
}

.info-section {
	padding: 30rpx;
	margin-top: 20rpx;
}

.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.8);
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.label {
	font-size: 28rpx;
	color: #333;
}

.phone-text {
	font-size: 28rpx;
	color: #666;
}

input {
	flex: 1;
	height: 60rpx;
	font-size: 28rpx;
	text-align: right;
	margin-right: 20rpx;
}

.function-section {
	padding: 30rpx;
	margin-top: 20rpx;
}

.function-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.8);
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.btn-section {
	padding: 30rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
}

.save-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #4a90e2;
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
}


</style>
